<template>
	<template v-for="val in props.childList">
		<el-sub-menu :index="val.menu_id" :key="val.menu_id" v-if="val.children && val.children.length > 0">
			<template #title>
				<dx-icon color="#ffffff" size="16" :name="val.icon" class="mr-5px"></dx-icon>
				<text>{{ val.name }}</text>
			</template>
			<sub-item :child-list="val.children" />
		</el-sub-menu>
		<template v-else>
			<el-menu-item :index="val.url" :key="val.url">
				<template v-if="!val.is_link">
					<dx-icon :color="iconColor(val.url)" size="16" :name="val.icon" class="mr-5px"></dx-icon>
					<span>{{ val.name }}</span>
				</template>
				<template v-else>
					<a :href="val.url" target="_blank" rel="opener" class="w100">
						<dx-icon color="#ffffff" size="16" :name="val.icon" class="mr-5px"></dx-icon>
						{{ val.name }}
					</a>
				</template>
			</el-menu-item>
		</template>
	</template>
</template>

<script setup lang="ts">
import { dtoMenuList } from '../../types/interface';
import { useRouteStore } from '@/uni_modules/dx-admin/stores/routes';
import { useThemeStore } from '../../stores/theme';
import { computed } from 'vue';

const props = defineProps<{
	childList: dtoMenuList[];
}>();
const routeStore = useRouteStore();
const themeStore = useThemeStore();
const iconColor = computed(() => (url: string) => {
	let status = routeStore.currentActiveRoute === url;
	if (themeStore.isOpenSelectBgColor) {
		return status ? themeStore.menuHighlightColor : '#ffffff';
	} else {
		return status ? 'var(--el-menu-active-color)' : '#ffffff';
	}
});
</script>
